<!--自驾游,用新的卡片模板，首页最后面也可以用卡片布局-->
<template>
  <f7-page no-toolbar
    infinite
    :infinite-distance="50"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
    ptr @ptr:refresh="loadMore2"
  >
    <f7-navbar title="自驾游·聚" back-link="Back"></f7-navbar>

      <f7-card expandable v-for="(item, index) in items" :key="index" class="margin-top">
        <f7-card-content :padding="false">
          <div class="bg-color-yellow" :style="{height: '300px'}">
            <f7-card-header text-color="black" class="display-block">
              Framework7
              <br/>
              <small :style="{opacity: 0.7}">Build Mobile Apps</small>
            </f7-card-header>
            <f7-link card-close color="black" class="card-opened-fade-in" :style="{position: 'absolute', right: '15px', top: '15px'}" icon-f7="close_round_fill"></f7-link>
          </div>
          <div class="card-content-padding">
            <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
          </div>
        </f7-card-content>
      </f7-card>

<!--    <f7-list media-list class="test-content">
      &lt;!&ndash;<f7-list-item v-for="(item, index) in items" :key="index">&ndash;&gt;

        <f7-list-item v-for="(item, index) in items" :key="index"
                link="#"
                title="Yellow Submarine"
                after="$15"
                subtitle="Beatles"
                text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        >
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
        </f7-list-item>

      &lt;!&ndash;</f7-list-item>&ndash;&gt;
    </f7-list>-->
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        allowInfinite: true,
        showPreloader: true,
      };
    },
    methods: {
      loadMore() {
        const self = this;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(() => {
          if (self.items.length >= 200) {
            self.showPreloader = false;
            return;
          }

          const itemsLength = self.items.length;

          for (let i = 1; i <= 20; i += 1) {
            self.items.push(itemsLength + i);
          }

          self.allowInfinite = true;
        }, 1000);
      },
      loadMore2(event, done) {

        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },
      cardClick(){
        console.info("点击card");
      }
    },
  };
</script>
<style scoped>
  .test-content {
    margin: 0px;
  }
</style>
